<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>WanVideo Data Flow Explorer</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
        <style>
            .active-tab {
                border-bottom: 3px solid #3b82f6;
            }
            .flow-node {
                transition: all 0.3s ease;
            }
            .flow-node:hover {
                transform: scale(1.05);
                filter: brightness(1.1);
            }
            .block-item {
                transition: all 0.2s ease;
            }
            .block-item:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
        </style>
    </head>
    <body class="bg-gray-50">
        <!-- Header -->
        <header class="bg-white shadow-sm border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="py-4">
                    <h1 class="text-3xl font-bold text-gray-900">
                        WanVideo Internal Data Flow Explorer
                    </h1>
                    <p class="text-gray-600 mt-1">
                        Technical Deep Dive into WanVideo Architecture
                    </p>
                </div>
            </div>
        </header>

        <!-- Configuration Sidebar -->
        <div class="flex">
            <aside
                class="w-64 bg-white border-r border-gray-200 p-6 h-screen sticky top-0 overflow-y-auto"
            >
                <h2 class="text-lg font-semibold mb-4">Configuration</h2>

                <!-- Video Parameters -->
                <div class="mb-6">
                    <h3 class="font-medium text-gray-700 mb-3">
                        Video Parameters
                    </h3>
                    <div class="space-y-3">
                        <div>
                            <label class="text-sm text-gray-600">Width</label>
                            <input
                                type="number"
                                id="width"
                                value="480"
                                step="32"
                                min="256"
                                max="1920"
                                class="w-full border rounded px-2 py-1 text-sm"
                            />
                        </div>
                        <div>
                            <label class="text-sm text-gray-600">Height</label>
                            <input
                                type="number"
                                id="height"
                                value="832"
                                step="32"
                                min="256"
                                max="1080"
                                class="w-full border rounded px-2 py-1 text-sm"
                            />
                        </div>
                        <div>
                            <label class="text-sm text-gray-600">Frames</label>
                            <input
                                type="number"
                                id="frames"
                                value="41"
                                step="4"
                                min="1"
                                max="241"
                                class="w-full border rounded px-2 py-1 text-sm"
                            />
                        </div>
                        <div>
                            <label class="text-sm text-gray-600"
                                >Batch Size</label
                            >
                            <select
                                id="batch-size"
                                class="w-full border rounded px-2 py-1 text-sm"
                            >
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="4">4</option>
                                <option value="8">8</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Model Settings -->
                <div class="mb-6">
                    <h3 class="font-medium text-gray-700 mb-3">
                        Model Settings
                    </h3>
                    <div class="space-y-3">
                        <div>
                            <label class="text-sm text-gray-600"
                                >Precision</label
                            >
                            <select
                                id="precision"
                                class="w-full border rounded px-2 py-1 text-sm"
                            >
                                <option value="fp32">FP32</option>
                                <option value="fp16" selected>FP16</option>
                                <option value="fp8">FP8</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-sm text-gray-600"
                                >Attention Mode</label
                            >
                            <select
                                id="attention"
                                class="w-full border rounded px-2 py-1 text-sm"
                            >
                                <option value="sdpa" selected>SDPA</option>
                                <option value="flash_attn_2">
                                    Flash Attention 2
                                </option>
                                <option value="sageattn">SageAttn</option>
                                <option value="radial_sparse_sage">
                                    Radial Sparse SageAttn
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Computed Metrics -->
                <div class="bg-gray-100 rounded-lg p-4">
                    <h3 class="font-medium text-gray-700 mb-3">
                        Computed Metrics
                    </h3>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Latent Shape:</span>
                            <span id="latent-shape" class="font-mono">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Sequence Length:</span>
                            <span id="seq-length" class="font-mono">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Compression:</span>
                            <span id="compression" class="font-mono">-</span>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <main class="flex-1 p-6">
                <!-- Tabs -->
                <div class="border-b border-gray-200 mb-6">
                    <nav class="flex space-x-8">
                        <button
                            onclick="showTab('overview')"
                            id="tab-overview"
                            class="py-2 px-1 text-gray-700 font-medium active-tab"
                        >
                            Pipeline Overview
                        </button>
                        <button
                            onclick="showTab('text-encoding')"
                            id="tab-text-encoding"
                            class="py-2 px-1 text-gray-700 font-medium"
                        >
                            Text Encoding
                        </button>
                        <button
                            onclick="showTab('latent-space')"
                            id="tab-latent-space"
                            class="py-2 px-1 text-gray-700 font-medium"
                        >
                            Latent Space
                        </button>
                        <button
                            onclick="showTab('transformer')"
                            id="tab-transformer"
                            class="py-2 px-1 text-gray-700 font-medium"
                        >
                            Transformer Flow
                        </button>
                        <button
                            onclick="showTab('memory')"
                            id="tab-memory"
                            class="py-2 px-1 text-gray-700 font-medium"
                        >
                            Memory Analysis
                        </button>
                        <button
                            onclick="showTab('activation')"
                            id="tab-activation"
                            class="py-2 px-1 text-gray-700 font-medium"
                        >
                            Activation Editor
                        </button>
                    </nav>
                </div>

                <!-- Tab Content -->
                <div id="content-overview" class="tab-content">
                    <h2 class="text-2xl font-bold mb-4">
                        Data Pipeline Overview
                    </h2>
                    <div
                        id="pipeline-flow"
                        class="bg-white rounded-lg p-6 shadow-sm"
                    >
                        <!-- D3.js pipeline visualization will go here -->
                    </div>

                    <div class="grid grid-cols-3 gap-4 mt-6">
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <h3 class="font-semibold text-gray-700">
                                Model Parameters
                            </h3>
                            <p class="text-2xl font-bold mt-2">14B</p>
                            <p class="text-sm text-gray-600">Transformer</p>
                        </div>
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <h3 class="font-semibold text-gray-700">
                                Text Encoder
                            </h3>
                            <p class="text-2xl font-bold mt-2">11B</p>
                            <p class="text-sm text-gray-600">UMT5-XXL</p>
                        </div>
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <h3 class="font-semibold text-gray-700">
                                Transformer Blocks
                            </h3>
                            <p class="text-2xl font-bold mt-2">40</p>
                            <p class="text-sm text-gray-600">Attention + FFN</p>
                        </div>
                    </div>
                </div>

                <div id="content-text-encoding" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-4">
                        Text Encoding Data Flow
                    </h2>
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="mb-4 bg-blue-50 rounded-lg p-3">
                            <p class="text-sm text-blue-800">
                                <strong>WAN-Style Prompts:</strong> WanVideo was
                                trained on detailed scene descriptions. Write
                                complete paragraphs describing the subject,
                                environment, lighting, and atmosphere.
                            </p>
                        </div>
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2"
                                    >Main Prompt (WAN-style)</label
                                >
                                <textarea
                                    id="main-prompt"
                                    rows="6"
                                    class="w-full border rounded-lg px-3 py-2 text-sm"
                                    placeholder="Write a detailed scene description..."
                                >
A majestic gray tabby cat walks through a sunny plaza in the late afternoon. The cat moves with confident strides across weathered cobblestones, its tail held high. The plaza is surrounded by Mediterranean-style buildings with terracotta roofs. Potted plants line the walkways, and a fountain bubbles gently in the center. Golden sunlight creates long shadows across the square.</textarea
                                >
                            </div>
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2"
                                    >Negative Prompt</label
                                >
                                <textarea
                                    id="negative-prompt"
                                    rows="6"
                                    class="w-full border rounded-lg px-3 py-2 text-sm"
                                    placeholder="What to avoid..."
                                >
blurry, low quality, distorted, unrealistic proportions, bad anatomy, watermark</textarea
                                >
                            </div>
                        </div>

                        <div class="mt-6">
                            <canvas
                                id="token-chart"
                                class="w-full"
                                height="200"
                            ></canvas>
                        </div>

                        <div class="mt-6 bg-gray-50 rounded-lg p-4">
                            <h3 class="font-semibold mb-2">
                                UMT5-XXL Processing Details
                            </h3>
                            <ul class="space-y-1 text-sm text-gray-600">
                                <li>• Input: Tokenized text sequences</li>
                                <li>
                                    • Output: Fixed [256, 4096] embeddings per
                                    prompt
                                </li>
                                <li>• Memory per prompt: ~4.2 MB (FP32)</li>
                                <li>
                                    • Disk caching available for faster re-use
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div id="content-latent-space" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-4">
                        Latent Space Transformation
                    </h2>
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <canvas
                                    id="memory-chart"
                                    class="w-full"
                                ></canvas>
                            </div>
                            <div>
                                <canvas
                                    id="dimension-chart"
                                    class="w-full"
                                ></canvas>
                            </div>
                        </div>

                        <div class="mt-6 bg-gray-50 rounded-lg p-4">
                            <h3 class="font-semibold mb-2">
                                Patchification Process
                            </h3>
                            <p class="text-sm text-gray-600 mb-2">
                                The latent space is divided into patches for
                                transformer processing:
                            </p>
                            <ul class="space-y-1 text-sm text-gray-600">
                                <li>• VAE Stride: (4, 8, 8) for (T, H, W)</li>
                                <li>• Patch Size: (1, 2, 2)</li>
                                <li>
                                    • Each patch: 16 × 1 × 2 × 2 = 64 values
                                </li>
                                <li>• Flattened to 5,120 dimensions</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div id="content-transformer" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-4">
                        Transformer Block Data Flow
                    </h2>
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="mb-6">
                            <h3 class="font-semibold mb-3">
                                Block Architecture (40 Blocks Total)
                            </h3>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-4">
                                    <div class="w-32 text-right font-medium">
                                        LayerNorm →
                                    </div>
                                    <div class="flex-1 bg-blue-100 rounded p-2">
                                        Input normalization
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="w-32 text-right font-medium">
                                        Self-Attention →
                                    </div>
                                    <div
                                        class="flex-1 bg-green-100 rounded p-2"
                                    >
                                        40 heads, RoPE positional encoding
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="w-32 text-right font-medium">
                                        Cross-Attention →
                                    </div>
                                    <div
                                        class="flex-1 bg-yellow-100 rounded p-2"
                                    >
                                        Text conditioning integration
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="w-32 text-right font-medium">
                                        FFN →
                                    </div>
                                    <div
                                        class="flex-1 bg-purple-100 rounded p-2"
                                    >
                                        5,120 → 13,824 → 5,120
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h3 class="font-semibold mb-3">
                                Block Specialization
                            </h3>
                            <canvas
                                id="block-specialization-chart"
                                class="w-full"
                                height="300"
                            ></canvas>
                        </div>

                        <div class="mt-6">
                            <h3 class="font-semibold mb-3">
                                Interactive Block Explorer
                            </h3>
                            <div class="flex items-center space-x-4 mb-4">
                                <label class="text-sm font-medium"
                                    >Select Block:</label
                                >
                                <input
                                    type="range"
                                    id="block-selector"
                                    min="0"
                                    max="39"
                                    value="20"
                                    class="flex-1"
                                    oninput="updateBlockInfo()"
                                />
                                <span
                                    id="block-number"
                                    class="font-mono font-bold"
                                    >20</span
                                >
                            </div>
                            <div
                                id="block-info"
                                class="bg-gray-50 rounded-lg p-4"
                            >
                                <!-- Block info will be updated dynamically -->
                            </div>
                        </div>
                    </div>
                </div>

                <div id="content-memory" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-4">
                        Memory Usage Analysis
                    </h2>
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <canvas
                                    id="model-memory-chart"
                                    class="w-full"
                                ></canvas>
                            </div>
                            <div>
                                <canvas
                                    id="activation-memory-chart"
                                    class="w-full"
                                ></canvas>
                            </div>
                        </div>

                        <div class="mt-6 grid grid-cols-4 gap-4">
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-gray-600">
                                    Model Memory
                                </p>
                                <p
                                    id="model-memory-total"
                                    class="text-2xl font-bold"
                                >
                                    -
                                </p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-gray-600">
                                    Activation Memory
                                </p>
                                <p
                                    id="activation-memory-total"
                                    class="text-2xl font-bold"
                                >
                                    -
                                </p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-gray-600">
                                    Buffer/Cache
                                </p>
                                <p class="text-2xl font-bold">2.0 GB</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 text-center">
                                <p class="text-sm text-gray-600">
                                    Total Required
                                </p>
                                <p id="total-memory" class="text-2xl font-bold">
                                    -
                                </p>
                            </div>
                        </div>

                        <div class="mt-6 bg-blue-50 rounded-lg p-4">
                            <h3 class="font-semibold mb-2">
                                Memory Optimization Options
                            </h3>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <h4 class="font-medium mb-1">
                                        Model Optimizations:
                                    </h4>
                                    <ul class="space-y-1 text-gray-600">
                                        <li>
                                            • FP8 Quantization: Save ~75% model
                                            memory
                                        </li>
                                        <li>
                                            • Model Offloading: Keep only active
                                            blocks in VRAM
                                        </li>
                                        <li>
                                            • LoRA: Use adapters instead of full
                                            model
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">
                                        Activation Optimizations:
                                    </h4>
                                    <ul class="space-y-1 text-gray-600">
                                        <li>
                                            • Flash Attention: Reduce quadratic
                                            memory
                                        </li>
                                        <li>
                                            • Gradient Checkpointing: Trade
                                            compute for memory
                                        </li>
                                        <li>
                                            • Lower Resolution: Reduces sequence
                                            length quadratically
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="content-activation" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-4">
                        Activation Editor Analysis
                    </h2>

                    <!-- Critical Guidelines Alert -->
                    <div
                        class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"
                    >
                        <div class="flex">
                            <div class="ml-3">
                                <p class="text-sm font-medium text-yellow-800">
                                    Critical Requirement
                                </p>
                                <p class="text-sm text-yellow-700 mt-1">
                                    Main and injection prompts must be >50%
                                    different for visible effects. Use WAN-style
                                    detailed descriptions (full paragraphs, not
                                    short phrases).
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <h3 class="font-semibold mb-3">
                                    Injection Configuration
                                </h3>
                                <div class="space-y-3">
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-700 mb-1"
                                            >Main Prompt (WAN-style)</label
                                        >
                                        <textarea
                                            id="activation-main-prompt"
                                            rows="5"
                                            class="w-full border rounded-lg px-3 py-2 text-sm"
                                            placeholder="Write a detailed scene description..."
                                        >
A gray tabby cat walks through a sunlit garden. The cat moves gracefully between rows of colorful flowers, its tail swaying gently. Butterflies flutter nearby. The garden has well-maintained grass and stone pathways winding through flower beds.</textarea
                                        >
                                    </div>
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-700 mb-1"
                                            >Injection Prompt (WAN-style)</label
                                        >
                                        <textarea
                                            id="activation-injection-prompt"
                                            rows="5"
                                            class="w-full border rounded-lg px-3 py-2 text-sm"
                                            placeholder="Write a contrasting detailed scene..."
                                        >
An underwater coral reef scene with crystal clear water. Schools of tropical fish swim between vibrant coral formations. Sunlight filters through the water creating dancing patterns on the sandy bottom. Sea anemones sway with the current.</textarea
                                        >
                                    </div>
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-700 mb-1"
                                        >
                                            Injection Strength:
                                            <span id="strength-value">0.4</span>
                                            <span class="text-xs text-gray-500"
                                                >(0.3-0.5 recommended, 0.1-0.2
                                                for Lightx2v)</span
                                            >
                                        </label>
                                        <input
                                            type="range"
                                            id="injection-strength"
                                            min="0"
                                            max="1"
                                            step="0.1"
                                            value="0.4"
                                            class="w-full"
                                            oninput="updateStrengthValue()"
                                        />
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="font-semibold mb-3">
                                    Block Selection
                                </h3>
                                <div class="mb-3">
                                    <select
                                        id="pattern-preset"
                                        class="w-full border rounded px-3 py-2"
                                        onchange="updateBlockPattern()"
                                    >
                                        <option value="custom">Custom</option>
                                        <option value="early">
                                            Early Blocks (0-10) -
                                            Textures/Colors
                                        </option>
                                        <option value="middle">
                                            Middle Blocks (10-30) -
                                            Structure/Objects
                                        </option>
                                        <option value="late">
                                            Late Blocks (30-40) - Semantic
                                            Concepts
                                        </option>
                                        <option value="alternating">
                                            Alternating - Every 2nd block
                                        </option>
                                        <option value="sparse">
                                            Sparse - Every 4th block
                                        </option>
                                        <option value="first_half">
                                            First Half (0-20) - Foundation
                                        </option>
                                        <option value="second_half">
                                            Second Half (20-40) - Higher
                                            Concepts
                                        </option>
                                    </select>
                                </div>

                                <div
                                    class="grid grid-cols-10 gap-1"
                                    id="block-grid"
                                >
                                    <!-- Block checkboxes will be generated by JavaScript -->
                                </div>

                                <div class="mt-3 text-sm text-gray-600">
                                    Active blocks:
                                    <span
                                        id="active-block-count"
                                        class="font-bold"
                                        >0</span
                                    >/40
                                </div>
                            </div>
                        </div>

                        <div class="mt-6">
                            <canvas
                                id="blending-chart"
                                class="w-full"
                                height="300"
                            ></canvas>
                        </div>

                        <div class="mt-6 bg-gray-50 rounded-lg p-4">
                            <h3 class="font-semibold mb-3">
                                Block Patterns (General Tendencies)
                            </h3>
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b">
                                        <th class="text-left pb-2">Range</th>
                                        <th class="text-left pb-2">
                                            Typical Processing
                                        </th>
                                        <th class="text-left pb-2">
                                            Testing Focus
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b">
                                        <td class="py-2 font-medium">
                                            Early (0-13)
                                        </td>
                                        <td class="py-2">
                                            Local patterns, colors, textures,
                                            edges
                                        </td>
                                        <td class="py-2 text-gray-600">
                                            Material transformation, texture
                                            mixing
                                        </td>
                                    </tr>
                                    <tr class="border-b">
                                        <td class="py-2 font-medium">
                                            Middle (14-26)
                                        </td>
                                        <td class="py-2">
                                            Object boundaries, scene structure,
                                            motion
                                        </td>
                                        <td class="py-2 text-gray-600">
                                            Object morphing, composition changes
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 font-medium">
                                            Late (27-39)
                                        </td>
                                        <td class="py-2">
                                            Semantic relationships, global
                                            coherence
                                        </td>
                                        <td class="py-2 text-gray-600">
                                            Concept blending, mood
                                            transformation
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="text-xs text-gray-600 mt-2">
                                Note: These are general patterns from
                                transformer research, not rigid rules. Actual
                                behavior depends on specific prompts and their
                                embedding difference.
                            </p>
                        </div>

                        <div class="mt-4 bg-blue-50 rounded-lg p-4">
                            <h3 class="font-semibold mb-2">
                                Prompt Difference Calculator
                            </h3>
                            <p class="text-sm text-gray-700 mb-3">
                                Estimate the semantic difference between your
                                prompts (aim for >50%):
                            </p>
                            <div class="flex items-center space-x-4">
                                <button
                                    onclick="calculatePromptDifference()"
                                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
                                >
                                    Calculate Difference
                                </button>
                                <div
                                    id="prompt-difference-result"
                                    class="text-sm font-medium"
                                ></div>
                            </div>
                        </div>

                        <div class="mt-4 bg-gray-50 rounded-lg p-4">
                            <h3 class="font-semibold mb-2">Debug Features</h3>
                            <div class="text-sm text-gray-700">
                                <p class="mb-2">
                                    The WanVideoActivationEditor node includes
                                    runtime log level control:
                                </p>
                                <ul
                                    class="list-disc list-inside space-y-1 text-gray-600"
                                >
                                    <li>
                                        <strong>off</strong>: No debug output
                                    </li>
                                    <li>
                                        <strong>basic</strong>: Essential
                                        information only
                                    </li>
                                    <li>
                                        <strong>verbose</strong>: Detailed
                                        operation logs including percent changed
                                    </li>
                                    <li>
                                        <strong>trace</strong>: Full trace with
                                        stack information
                                    </li>
                                </ul>
                                <p class="mt-2 text-xs">
                                    Use "verbose" to see the actual embedding
                                    difference percentages during generation.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <script src="wan_dataflow_webapp.js"></script>
    </body>
</html>
